<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios说明</title>
    <!-- 导入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
    <!-- 引入qs -->
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.js"></script>
</head>
<body>
    <script>
        /**
         * 结论：
         * 1. 对于post方式
         *  axios会自动将对象转换为json字符串，但是不会将对象转换为查询字符串
         *  也就是说：
         *  使用axios调用登录类似的接口时，不需要做任何转换
         *  使用axios调用请求方式为post，参数分开填写的接口时，需要使用qs转换
         * 2. 对于get方式
         *  axios会自动将对象转换为查询字符串
         *  使用axios调用请求方式为get，参数分开填写的接口时，不需要做任何转换
         * 
         * 
         * 对象、查询字符串、json字符串写法：
         * 对象
         *  {val1:key1,val2:key2}
         * 查询字符串
         *  val1=key1&val2=key2
         * json字符串
         *  {"val1":"key1","val2":"key2"}
        */

        // 请求post方式的登录接口 - json字符串
        axios({
            url:'http://39.96.21.48:5588/user/login',
            method:'post',
            data:{
                password:123321,
                type:'manager',
                username:'admin'
            }
        }).then((res)=>{
            console.log(res.data.data.token);
        })
        // 请求post方式的保存评论接口 - 查询字符串
        axios({
            url:'http://39.96.21.48:5588/comment/saveOrUpdate',
            method:'post',
            data:Qs.stringify({
                content:123321,
                orderId:1150,
                cusId:134
            })
        }).then((res)=>{
            console.log(res.data);
        })
        // 请求get方式的查询订单接口 - 查询字符串
        axios({
            url:'http://39.96.21.48:5588/order/query',
            method:'get',
            params:{
                customerId:135,
                waiterId:30
            }
        }).then((res)=>{
            console.log(res.data.data);
        })
    </script>
</body>
</html>